<template>
  <van-dialog
    class="dialog"
    v-model="show"
    :show-confirm-button="false"
    show-cancel-button
    cancel-button-text="关闭"
    @opened="onOpened"
  >
    <slot />
    <div class="copy-content" :class="{ margin: $slots.default }">
      <template v-if="qrcode">
        <div class="tip">在微信长按👇识别二维码加我们</div>
        <long-touch-wechat image :qrcode="qrcode" @callback="onCopy" />
      </template>
      <template v-else>
        <template v-if="!autoCopy">
          <div class="tip">长按👇复制微信号,打开微信加我们</div>
          <long-touch-wechat :qrcode="wxno" @callback="onCopy" />
        </template>
        <template v-else>
          <div
            id="wxno"
            class="wxno"
            @touchstart.stop.prevent
            @copy.stop.prevent
            @click="wxnoClick"
          >
            <span>{{ wxno }}</span>
          </div>
          <van-button type="info" block class="open-wx" @click="openWxClick">
            微信已复制，点击打开微信
          </van-button>
        </template>
      </template>
    </div>
  </van-dialog>
</template>
<script>
import { openWxApp } from "@/utils";
import { isWechat } from "@/utils/validate";
import longTouch from "@/directives/long-touch";
import clickOutside from "@/directives/click-outside";
import { copy } from "@/directives/clipboard";
import LongTouchWechat from "../components/long-touch-wechat";

export default {
  components: {
    LongTouchWechat,
  },
  directives: {
    longTouch,
    clickOutside,
  },
  props: {
    qrcode: String,
    wxno: String,
    autoCopy: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isWechat,
      show: false,
      showCopy: false,
    };
  },
  methods: {
    onOpened() {
      if (this.autoCopy) {
        // this.$nextTick(() => {
        // 	setTimeout(() => {
        // 		this.autoClick(document.getElementById("wxno"));
        // 	}, 500);
        // });
      }
    },
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    clickOutside() {
      this.showCopy = false;
    },
    longTouchWx() {
      this.showCopy = true;
    },
    onCopy() {
      this.$emit("joinwx");
    },
    openWxClick(ev) {
      copy(this.wxno, ev, (v) => {
        if (!v) return;
        this.$emit("joinwx");
        openWxApp();
      });
    },
    autoClick(el) {
      if (document.all) {
        el.fireEvent("onclick");
      } else {
        var evt = document.createEvent("Events");
        evt.initEvent("click", true, true);
        el.dispatchEvent(evt);
      }
    },
    wxnoClick(ev) {
      copy(this.wxno, ev, (v) => {
        if (!v) return;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .van-dialog {
    &__content {
      user-select: none;
      padding: 0.5333rem;
      text-align: center;
      max-height: 80vh;
      overflow: auto;
    }
  }
}
.copy-content {
  &.margin {
    margin-top: 0.3125rem;
  }
  .tip {
    font-size: 0.3733rem;
    color: #666;
    margin: 0 0 0.3125rem;
  }

  .no-select {
    /*ios，如果不行可以加一个透明遮罩层*/
    -webkit-touch-callout: none;
    touch-callout: none;

    /*安卓*/
    -webkit-user-select: none !important;
    user-select: none !important;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
  }

  .wxno {
    margin: 0.2222rem 0;
    padding: 0.4222rem 0.2222rem;
    font-size: 0.44444rem;
    color: #f7763f;
    background: #faf6f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    user-select: all;
    white-space: pre-wrap;
    word-break: break-all;
    .select-range {
      background: #f1c0ac;
    }
  }
  .open-wx {
    margin-top: 0.5333rem;
  }
}
</style>
